<template>
	<view class="dynamic">
		<!-- 顶部作者栏 -->
		<!-- <navBar class="d_auth" isBack>
			<view class="d_aCan" slot="center">
				<view class="d_aHead"><image :src="info.user_id.avatar.path"></image></view>
				<view class="d_aName omit-1">{{info.user_id.username}}</view>
			</view>
		</navBar> -->
		<nav-bars class="d_auth" bgColor="#fff" fontColor="#000">
			<view class="d_aCan" slot="default">
				<view class="d_aHead">
					<image :src="info.user_id.avatar.path"></image>
				</view>
				<view class="d_aName omit-1">{{info.user_id.username}}</view>
			</view>
		</nav-bars>
		
		<!-- banner -->
		<view class="d_banner" v-if="info.type == 0">
			<swiper class="swiper" autoplay interval="4200" duration="300" @change='bannerChange'>
				<view v-if="Array.isArray(info.media)">
					<swiper-item v-for="(item, index) in info.media" :key="index">
						<view class="d_bItem">
							<image :src="item.path"></image>
						</view>
					</swiper-item>
				</view>
				<view v-else>
					<swiper-item>
						<view class="d_bItem">
							<image :src="info.media.path"></image>
						</view>
					</swiper-item>
				</view>
			</swiper>
			<view class="d_bDots">
				<view v-for="(item, index) in info.media" :key="index">
					<view class="d_bDot" :class="{'active': index == bannerIndex}">
						<view class="d_bIcon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="playvideo" v-if="info.type == 1">
			<video style="width: 100%;" id="myVideo" :src="info.media[0].path" controls></video>
		</view>
		
		<!-- 内容 -->
		<view class="d_content">
			<view class="d_cTags">
				<view class="d_cTag">
					<view class="d_cIcon"><image src="/static/common/icon_topic.png"></image></view>
					<text>{{info.title}}</text>
				</view>
			</view>
			<view class="d_cText">{{info.content}}</view>
			<view class="d_cTime" v-if="create_time">{{create_time |formatDate}}</view>
		</view>
		
		<!-- 评论 -->
		<view class="d_evaluate">
			<view class="d_eTitle">评论<text>({{info.comment_num}})</text></view>
			<view class="d_eList">
				<view v-for="(comment,index) in commentList">
					<view class="d_eItem">
						<view class="d_eHead" v-if="comment.user_id.avatar.path"><image :src="comment.user_id.avatar.path"></image></view>
						<view class="d_eHead" v-else><image src="https://manager.ryz1620.com/static/my/avator.png"></image></view>
						<view class="d_eCont">
							<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
								<view class="d_eName">{{comment.user_id.username}}
									<!-- <view class="d_eAuth">作者</view> -->
								</view>
								<view class="d_eTxt">{{comment.content}}</view>
								<view class="d_eTxt">
									<view class="d_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
									<view class="d_eTip" @tap.top="getcommentdel(comment.id)" v-if="comment.user_id.id == useid">删除</view>
									<view class="d_eTip" v-else style="color: #333;">回复</view>
							    </view>
							</view>
							<view class="d_eIts">
								<view v-for="reply in comment.sub_reply">
									<view class="d_eiItem" @tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
										<view class="d_eiHead" v-if="reply.user_id.avatar.path"><image :src="reply.user_id.avatar.path"></image></view>
										<view class="d_eiHead" v-else><image src="https://manager.ryz1620.com/static/my/avator.png"></image></view>
										<view class="d_eiCont">
											<view class="d_eiName">{{reply.user_id.username}}</view>
											<view class="d_eiTxt">
												<view v-if="reply.isReplay" style="color: #666; font-size: 20rpx;">
													回复<text class="d_eiReply">{{reply.reply_id.username}}</text>：
												</view>
												{{reply.content}}
											</view>
											<view class="d_eiTxt">
												<view class="d_eiTip">{{reply.createTime}}</view>
												<view class="d_eiTip" @tap.top="getcommentdel(reply.id)" v-if="reply.user_id.id == useid">删除</view>
												<view class="d_eiTip" v-else style="color: #333;">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 评论框 -->
		<view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox">
				<view class="d_tFuns">
					<view class="d_tFun" @click="is_show_model=true">
						<view class="d_tIcon iconfont icon-transpond"></view>
						<view class="d_tTxt">转发</view>
					</view>
					<view class="d_tFun" @click="trendStore(info)">
						<view class="d_tIcon" v-if="info.support_status == 1"><image src="/static/common/icon_collection.png"></image></view>
						<view class="d_tIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
						<view class="d_tTxt">{{info.support_num}}</view>
					</view>
				</view>
				<!-- <view class="d_tInput"><input type="text" v-model="comment" @confirm="commentAuth" placeholder="评论一下吧~" placeholder-class="placeholder"/></view> -->
				<view class="d_tInput" v-if="!commentReplyName"><input  type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content" 
								:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
								@confirm="dync_comment"
								@input="inputKey($event, 'comment')" />
				</view>
				<view class="d_tInput" v-else>
					<input  type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
									:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
									@confirm="dync_commentReply"
									@input="inputKey($event, 'comment')" />
				</view>
			</view>
		</view>
		
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
		  <view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
			<view class="md-content">
			  <view class="md-content-item">
				<view class="s_bIcon iconfont icon-friend"></view>
				<view>分享给好友</view>
				<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
			  </view>
			  <view class="md-content-item" @click="popShareToPicture">
				<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
				<view>生成分享大图</view>
			  </view>
			</view>
			<view class="cancel" @click="is_show_model=false">取消</view>
		  </view>
		</view>
	</view>
</template>

<script>
import service_design from '@/service/team.js'
import service_mall from '@/service/mall.js'
import service_decoration from '@/service/decoration.js'
	
export default {
	data() {
		return {
			info: null,
			isSupport: false,
			// 分享弹窗
			popShare: false,
			// 评论
			commentPage:0,
			commentTime: 0,
			commentList: [],
			comment: '',
			replyId: null,
			content:'',
			useid:'',
			commentIsReply:false,
			commentLoading: false,
			commentReplyId:'',
			commentReplyName:'',
			// 轮播图
			bannerIndex: 0,
			bannerCurrent: 0,
			trend_id: null,
			create_time:'',
			userId:'',
			is_show_model: false,//是否显示分享模态窗
		}
	},
	onLoad(params) {
		this.$utils.getUrl()
		let scene = decodeURIComponent(params.scene);
		let token = uni.getStorageSync('token')
		scene = scene.split("&");
		let obj = {}
		for(let i = 0;i<scene.length;i++){
			let newscene = scene[i].split("=");
			obj[newscene[0]] = newscene[1];
		}
		if(obj.trendId){
			this.trend_id = obj.trendId
			this.getDetail()
			
		}else{
			this.trend_id = params.trendId
			this.getDetail()
		}
		if(params.share_uid){
			let shareuId= params.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		if(obj.share_uid){
			let shareuId= obj.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		this.dyna_getComment()
		this.getTrendTracet()
		this.userId = uni.getStorageSync('userId')
	},
	filters: {
		formatDate(value) {
			let date = new Date(parseInt(value) * 1000);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			let h = date.getHours();
			h = h < 10 ? "0" + h : h;
			let minute = date.getMinutes();
			let second = date.getSeconds();
			minute = minute < 10 ? "0" + minute : minute;
			second = second < 10 ? "0" + second : second;
			return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
		}
	},
	onShareAppMessage(res) {
		let that = this
		if (res.from === 'button') {}
		return {
		  title: this.info.title,
		  path: '/pages_design/pages/design/dynamic/dynamic?trendId=' + this.trend_id +'&share_uid='+ this.userId,
		  success: function (res) {
			that.getgetforwards()
		  }
		}  
	},
	methods: {
		// 获取详情数据
		getDetail() {
			service_decoration.getDyncDetail({ trend_id:this.trend_id})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.info = data
						this.create_time = data.create_time
					}
				})
		},
		// 转发
		getgetforwards() {
			service_decoration.gettrends({ trend_id:this.trend_id})
				.then(res => {	
			})
		},
		// 记录足迹
		getTrendTracet() {
			service_decoration.getTrendTracetrace({ trend_id:this.trend_id})
				.then(res => {		
			})
		},
		// 动态点赞
		trendStore(item) {
			let status = item.support_status
			if(status == 1){
				uni.showModal({
				    title: '提示',
				    content: '确认取消点赞?',
				    success:  (res) => {
				        if (res.confirm) {
						service_decoration.gitTrendstatus({trend_id: item.id, status:0 })
							.then(res => {
								if (res.code == 1) {
									this.info.support_status = 0
									this.info.support_num--
								}
								else {
									this.$utils.showErr({ title: res.msg })
								}
							})		
				        } else if (res.cancel) {
							return
				        }
				    }
				});
			}else{
				service_decoration.gitTrendstatus({ trend_id: item.id, status:1})
					.then(res => {
						if (res.code == 1) {
							this.info.support_status = 1
							this.info.support_num++
						}
						else {
							this.$utils.showErr({ title: res.msg })
						}
					})
		
			}
				
		},
		// 输入框输入内容事件
		inputKey(event, key) {
			this[key] = event.detail.value
		},
		moveHandle() {},
		// 获取设计动态的评价内容
		dyna_getComment() {
				this.commentTime++
				let commentTime = this.commentTime
				let commentPage = this.commentPage + 1
				// 获取评论数据
				service_decoration.getCommentList({ trend_id: this.trend_id, page: commentPage })
					.then(res => {
						if (this.commentTime === commentTime) { 
							
							if (res.code == 1) {
								let data = res.data
								let list = this.v|| []
								// 处理数据
								let nowTime = Date.now()

									for (let i = 0; i < data.length; i++) {
										data[i].create_time *= 1000
										data[i].createTime = this.$utils.getDateDiff(data[i].create_time)
										// 处理回复数据
										let replayList = data[i].sub_reply
										if (replayList && replayList.length) {
											for (let j = 0; j < replayList.length; j++) {
												replayList[j].create_time *= 1000
												replayList[j].createTime = this.$utils.getDateDiff(replayList[j].create_time,)
												
												// 是否是回复 回复数据 的数据
												if (data[i].id !== replayList[j].parent_id) replayList[j].isReplay = true
											}
										}
										// 保存数据
										list.push(data[i])
									}
						
								this.commentPage++
								this.commentList = list
							}
						}
					})
					.catch(err => {
						if (this.commentTime === commentTime) {
							this.commentLoading = false
						}
					})
		},
		// 评论
		dync_comment() {
			let content = this.content
			service_decoration.getcomment({ trend_id: this.trend_id, content: content })
				.then(res => {
					if (res.code == 1) {
						this.TrendPage = 0
						this.commentPage = 0
						this.commentList = []
						this.trend_idnum++
						this.content = ''
						this.dyna_getComment()
						this.getDetail()
					}
				})
				.catch(err => {
					
				})
		},
		// 回复他人评论
		dync_commentSelectReply(id,name) {
			this.commentIsReply = true
			this.commentReplyId = id
			this.commentReplyName = name
			this.content = ''
		},
		// 发布回复评论
		dync_commentReply(){
			service_decoration.getcommentreply({  comment_id: this.commentReplyId, content: this.content })
				.then(res => {
					if (res.code == 1) {
						this.commentIsReply = false
						this.commentPage = 0
						this.commentList = []
						this.content = ''
						this.commentReplyId = ''
						this.commentReplyName = ''
						this.dyna_getComment()
					}
				})
				.catch(err => {
					
			})
		},
		// 获取更多评论内容
		dync_commentNext(e) {
			this.dyna_getComment()
		},
		// 删除评论
		getcommentdel(id){
			uni.showModal({
			    title: '提示',
			    content: '确认删除评论?',
			    success:  (res) => {
			        if (res.confirm) {
					service_decoration.getcommentdel({comment_id: id})
						.then(res => {
							if (res.code == 1) {
								this.TrendPage = 0
								this.commentPage = 0
								this.commentList = []
								this.trend_idnum--
								this.content = ''
								this.dyna_getComment()
								this.getTrend()
							}
							else {
								this.$utils.showErr({ title: res.msg })
							}
						})		
			        } else if (res.cancel) {
						return
			        }
			    }
			});
		},
		// 轮播图
		bannerChange(e) {
			this.bannerIndex = e.detail.current
		},
		
		
		// 弹窗-分享==
		// 关闭弹窗
		popShareClose() {
			this.popShare = false
		},
		// 跳转-海报页面
		popShareToPicture() {
			uni.navigateTo({ url: '/pages_design/pages/design/dynamic/share?trendId=' + this.trend_id })
		}
	}
} 
</script>

<style lang="scss" scoped>
	
// 顶部作者栏=====
.dynamic .d_auth {position: relative;z-index: 100;}
.dynamic .d_auth .d_aCan {overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.dynamic .d_auth .d_aFocus {width: 114rpx;height: 48rpx;line-height: 48rpx;text-align: center;color: #fff;font-size: 20rpx;margin: 0 36rpx 0 40rpx;border-radius: 28rpx;background: #333;float: right;}
.dynamic .d_auth .d_aHead {width: 68rpx;height: 68rpx;margin: 0 28rpx 0 32rpx;border-radius: 50%;background: #f0f0f0;overflow: hidden;float: left;}
.dynamic .d_auth .d_aName {height: 40rpx;line-height: 40rpx;overflow: hidden;flex: 1;}


// banner=====
.dynamic .d_banner {width: 100vw;height: 640rpx;padding-top: 20rpx;background: #fff;position: relative;z-index: 99;}
.dynamic .d_banner .d_bSwiper {width: 100%;height: 100%;}
.dynamic .d_banner .d_bItem {width: 100%;height: 100%;background: #f0f0f0;}
.dynamic .d_banner .d_bTip {width: 80rpx;height: 52rpx;line-height: 52rpx;text-align: center;color: #fff;font-size: 24rpx;border-radius: 28rpx;background: #333;opacity: .8;position: absolute;top: 40rpx;right: 32rpx;z-index: 10;}


// 内容=====
.dynamic .d_content {padding-bottom: 40rpx;background: #fff;position: relative;
	&::after {content: "";height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 32rpx;right: 32rpx;}
}
.dynamic .d_content .d_cTags {padding: 20rpx 32rpx 0;overflow: hidden;}
.dynamic .d_content .d_cTag {height: 44px;height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 24rpx;padding-left: 48rpx;margin: 8rpx 8rpx 0 0;border-radius: 22rpx;background: #f9f6f3;position: relative;float: left;}
.dynamic .d_content .d_cIcon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
.dynamic .d_content .d_cText {line-height: 44rpx;margin: 16rpx 36rpx 0;}
.dynamic .d_content .d_cTime {height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;margin: 16rpx 0 0 36rpx;}


// 评论=====
.dynamic .d_evaluate {padding: 28rpx 0;background: #fff;}
.dynamic .d_evaluate .d_eTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;padding-left: 36rpx;
	& > text {font-size: 24rpx;font-weight: bold;padding-left: 8rpx;}
}
.dynamic .d_evaluate .d_eList {padding-left: 32rpx;}
.dynamic .d_evaluate .d_eItem {margin-top: 30rpx;
	&:nth-last-child(1) .d_eCont::after {content: none;}
}
.dynamic .d_evaluate .d_eHead, .dynamic .d_evaluate .d_eIts .d_eiHead {width: 66rpx;height: 66rpx;margin-right: 16rpx;border-radius: 50%;background: #f0f0f0;float: left;}
.dynamic .d_evaluate .d_eCont {padding-bottom: 28rpx;position: relative;overflow: hidden;
	&::after {content: "";width: 100%;height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
}
.dynamic .d_evaluate .d_eName, .dynamic .d_evaluate .d_eIts .d_eiName {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;		}
.dynamic .d_evaluate .d_eAuth, .dynamic .d_evaluate .d_eIts .d_eiAuth {width: 64rpx;height: 28rpx;line-height: 28rpx;text-align: center;color: #333;font-size: 20rpx;margin-left: 8rpx;border-radius: 28rpx;background: #f6f7fb;display: inline-block;}
.dynamic .d_evaluate .d_eTxt, .dynamic .d_evaluate .d_eIts .d_eiTxt {min-height: 34rpx;line-height: 34rpx;font-size: 24rpx;padding-right: 32rpx;margin-top: 4rpx;}
.dynamic .d_evaluate .d_eTip, .dynamic .d_evaluate .d_eIts .d_eiTip {color: #939393;font-size: 20rpx;padding-left: 16rpx;display: inline-block;}
// 他人回复
.dynamic .d_evaluate .d_eiItem {margin-top: 16rpx;}
.dynamic .d_evaluate .d_eiCont {overflow: hidden;}
.dynamic .d_evaluate .d_eiReply {color: #939393;font-size: 20rpx;padding: 0 4rpx;}

// 评论框=====
.dynamic .d_talk {
	.d_tShim {height: 96rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
	.d_tBox {width: 100vw;height: 96rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);background: #fff;position: fixed;bottom: 0;left: 0;box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);}
	.d_tFuns {padding-left: 30rpx;float: right;}
	.d_tFun {width: 110rpx;height: 96rpx;float: right;}
	.d_tIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #6c6c6c;font-size: 40rpx;margin: 0 auto;padding-top: 14rpx;box-sizing: content-box;}
	.d_tTxt {height: 28rpx;line-height: 28rpx;text-align: center;color: #939393;font-size: 20rpx;}
	.d_tInput {height: 60rpx;margin: 20rpx 0 0 32rpx;border-radius: 60rpx;overflow: hidden;
		& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 28rpx;background: #f6f7fb;}
	}
}
.cu-modal{
	    position: fixed;
	    bottom: 0;
	    background: rgba(0,0,0,.5);
	    top: 0;
		display: none;
		 width: 100%;
		 z-index: 500;
}
.show{
	display: block;
}
.bottom-md{
	position: absolute;
	bottom:0;
	background: #fff;
}
.share{
    position: fixed;
    color: #FFFFFF;
    right: 0;
    bottom: 190rpx;
    background: linear-gradient(to bottom right, #FE726B, #FE956B);
    padding: 10rpx 10rpx 10rpx 20rpx;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 0 20upx rgba(0,0,0,.09);
}
.cancel{
  width: 100vw;
  padding: 30rpx;
  text-align: center;
  background: #FFFFFF;
  color: #888;
  font-weight: normal;
  font-size: 30rpx;
}
.md-content{ 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 50rpx 0;
}
.md-content-item{
  margin: 0 90rpx;
  position: relative;
}
.md-content-item image{
  width: 100rpx;
  height: 100rpx;
  margin: auto;
}
.md-content-item view{
  margin-top: 15rpx;
  font-size: 28rpx;
}
.sharebtn{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.md-content-item .s_bIcon{font-size: 72rpx;}
.s_bIcon {width: 112rpx;height: 112rpx;color: #fff;font-size: 140rpx;margin: 60rpx auto 0;border-radius: 50%;background: #8bc37a;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);display: flex;justify-content: center;align-items: center;}
.s_bIcons{background: #ffd425;}

</style>